<template>
	<view class="template-login">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>

		<view class="login">
			<!-- 顶部背景图片-->
			<view class="login__bg login__bg--top">
				<image class="bg" src="https://img1.imgtp.com/2023/08/23/Dcp5A1J5.jpg" mode="widthFix"></image>
			</view>
			<view class="login__bg login__bg--top">
				<image class="rocket rocket-sussuspension" src="https://img1.imgtp.com/2023/08/23/5HeZK8To.png" mode="widthFix">
				</image>
			</view>

			<view class="login__wrapper">
				<!-- 输入框内容-->
				<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
					<view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" @click="userLogin"
						:hover-stay-time="150">立即登录</view>
					<tn-checkbox v-model="checked" @change="checkboxChange" :name="isChecked" size="20">
						<view style="display: flex;font-size: 20rpx;">
							<view class="login__info__item__tips">登录前请仔细阅读</view>
							<view class="login__info__item__tips" style="color: #00C3FF !important;"
								@click="tn('/subpages/help/content?sence=privacy')">
								用户隐私协议
							</view>
							<view class="login__info__item__tips">和</view>
							<view class="login__info__item__tips" style="color: #00C3FF !important;"
								@click="tn('/subpages/help/content?sence=service')">
								用户服务协议
							</view>
						</view>
					</tn-checkbox>
				</view>
			</view>

			<!-- 底部背景图片-->
			<view class="login__bg login__bg--bottom">
				<image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
			</view>
		</view>

		<!-- 微信隐私鉴权保护弹窗开始 -->
		<!-- #ifdef MP-WEIXIN -->
		<privacy-popup ref="privacyComponent"></privacy-popup>
		<!-- #endif -->
		<!-- 微信隐私鉴权弹窗保护结束 -->

	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import PrivacyPopup from '@/components/privacy-popup/privacy-popup.vue'
	import {
		userLogin
	} from '@/utils/api/user'
	export default {
		name: 'UserLogin',
		mixins: [template_page_mixin],
		components: {
			PrivacyPopup
		},
		data() {
			return {
				checked: false,
			}
		},
		onLoad() {
			this.$t.mpShare = {
				share: false,
			}
			if (!this.$t.mpShare.share) {
				uni.hideShareMenu()
			}
		},
		methods: {
			userLogin() {
				if (!this.checked) {
					this.$func.showToast("请同意用户协议")
					return
				}
				let _that = this
				let sysInfo = {}
				uni.getSystemInfo({
					success(res) {
						sysInfo = res
					}
				})
				uni.login({
					provider: 'weixin',
					success(res) {
						userLogin({
							code: res.code,
							sysInfo: sysInfo
						}).then(res => {
							if (res.code == 100) {
								uni.setStorageSync("login", res.data.token)
								_that.$func.showToast(res.msg, 2000, true)
								setTimeout(function() {
									_that.navBack()
								}, 2000)
								return
							}
							_that.$func.showToast(res.msg, 3000, true)
						})
					},
					fail(res) {
						_that.$func.showToast(res.errMsg)
					}
				})
			},
			checkboxChange(e) {
				this.checked = !e.value
			},
			tn(e) {
				this.$func.navigatorTo(e)
			},
			// 返回上一页
			navBack() {
				const pages = getCurrentPages()
				if (pages && pages.length > 0) {
					const firstPage = pages[0]
					if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					} else {
						uni.navigateBack({
							delta: 1
						})
					}
				} else {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/scss/custom_nav_bar.scss";

	/* 悬浮 */
	.rocket-sussuspension {
		animation: suspension 3s ease-in-out infinite;
	}

	@keyframes suspension {

		0%,
		100% {
			transform: translate(0, 0);
		}

		50% {
			transform: translate(-0.8rem, 1rem);
		}
	}

	.login {
		position: relative;
		height: 100%;
		z-index: 1;

		/* 背景图片 start */
		&__bg {
			z-index: -1;
			position: fixed;

			&--top {
				top: 0;
				left: 0;
				right: 0;
				width: 100%;

				.bg {
					width: 750rpx;
					will-change: transform;
				}

				.rocket {
					margin: 50rpx 28%;
					width: 400rpx;
					will-change: transform;
				}
			}

			&--bottom {
				bottom: -10rpx;
				left: 0;
				right: 0;
				width: 100%;
				// height: 144px;
				margin-bottom: env(safe-area-inset-bottom);

				image {
					width: 750rpx;
					will-change: transform;
				}
			}
		}

		/* 背景图片 end */

		/* 内容 start */
		&__wrapper {
			margin-top: 600rpx;
			width: 100%;
		}


		/* 登录注册信息 start */
		&__info {
			margin: 0 30rpx;
			margin-top: 105rpx;
			padding: 30rpx 51rpx;
			padding-bottom: 0;
			border-radius: 20rpx;
			background-color: #ffff;
			box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(0, 3, 72, 0.1);

			&__item {
				&__button {
					margin-top: 75rpx;
					margin-bottom: 39rpx;
					width: 100%;
					height: 77rpx;
					text-align: center;
					font-size: 31rpx;
					font-weight: bold;
					line-height: 77rpx;
					letter-spacing: 1em;
					text-indent: 1em;
					border-radius: 39rpx;
					box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
				}

				&__tips {
					margin: 10rpx 0;
					color: #AAAAAA;
				}
			}
		}

		/* 登录注册信息 end */
	}

	// /deep/.input-placeholder {
	// 	font-size: 24rpx;
	// 	color: #E6E6E6;
	// }
</style>